<template>
  <div class="message-container">
    <!-- 留言表单 -->
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" style="width: 50%;">
      <el-form-item label="昵称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="内容：" prop="content">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="欢迎建议，提问，共同学习！"
          v-model="form.content">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="submitForm">提交留言</el-button>
      </el-form-item>
    </el-form>

    <comment-item :commentData="commentData"/>

    <!-- 分页 -->
    <div class="page-container" v-if="count > 10">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="page.limit"
        :total="count"
        :current-page="nowPage"
        @current-change="currentChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8083/api'
import CommentItem from '@/components/web/commentItem.vue'

export default {
  components: {
    CommentItem
  },
  async asyncData ({params}) {
    const data = await axios.get('/message/get', {
      params: {
        limit: 10,
        pageNo: params.id || 1
      }
    })
    return {
      commentData: data.data,
      count: data.count,
      nowPage: Number(params.id)
    }
  },
  data () {
    return {
      form: {
        name: this.$route.query.name || '',
        email: this.$route.query.email || '',
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        content: [
          { required: true, message: '请输入留言内容', trigger: 'blur' }
        ]
      },
      page: {
        pageNo: 1,
        limit: 10
      }
    }
  },
  methods: {
    // 提交留言
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$http.post('/message/add', this.form).then(res => {
            if (res.code === 0) {
              this.$message.success('留言成功')
              this.form.content = ''
              let url = `/web/message`
              if (this.form.name.length || this.form.email.length) {
                url += '?'
              }
              if (this.form.name.length) {
                url += `name=${this.form.name}`
              }
              if (this.form.email.length) {
                url += `${this.form.name.length && '&'}email=${this.form.email}`
              }
              window.location.href = url
            }
          })
        } else {
          return false;
        }
      });
    },
    currentChange (pageNo) {
      let url = `/web/message/${pageNo}`
      if (this.form.name.length || this.form.email.length) {
        url += '?'
      }
      if (this.form.name.length) {
        url += `name=${this.form.name}`
      }
      if (this.form.email.length) {
        if (this.form.name.length) {
          url += '&'
        }
        url += `email=${this.form.email}`
      }
      window.location.href = url
    }
  }
}
</script>

<style lang="scss">
  .page-container {
    text-align: center;
  }
</style>
